<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding:0;
            list-style: none;
        }
        ul{
            width: 600px;
            height: 800px;
            border: 10px solid red;
            /* 设置ul为弹性容器 */
            display: flex;
            flex-flow: row wrap;
            /* 
                flex-wrap:
                    设置弹性元素是否在弹性容器中自动换行
                    可选值:
                        nowrap 默认值,元素不会自动换行
                        wrap    元素沿着辅轴方向自动换行
                        wrap-reverse 元素沿着辅轴反方向换行
            */
            /* flex-wrap: wrap-reverse; */
            /* flex-flow:  wrap和direction的简写属性*/
            /* flex-flow: row wrap; */


            /* 
                justify-content
                    -如何分配主轴上的空白空间(主轴上的元素如何排列)
                    -可选值
                        flex-start 元素沿着主轴起边排列
                        flex-end    元素沿着主轴终边排列
                        center      元素居中排列
                        space-around    空白分布到元素二侧
                        space-evenly    空白分布到元素的单侧
                        space-between   空白均匀分布到元素间

            */
            /* justify-content: center; */
            /* 
                 align-items
                    -元素在辅轴上如何对齐
                    -元素间的对齐方式
                        -可选值
                            stretch 默认值 将元素的长度设置为相同的值
                            flex-start元素不会拉伸,沿着辅轴起边对齐
                            flex-end 沿着辅轴终边对齐
                            center  居中对齐
                            baseline 基线对齐
            */
            /* justify-content: center; */
            align-items: flex-start;

            /* align-content: ; 辅轴空白空间的分布 
            和justify-content的值一样*/
            align-content: center;
        }
        li{
            width: 200px;
            background-color: #bfa;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            flex-shrink: 0;
            
        }
        li:nth-child(1){
            /* flex-grow: 1; */
            /* align-self: ; 用来覆盖当前弹性元素上的align-item
                给子元素单独设置 单独控制
            */
            align-self: flex-end;
        }
        li:nth-child(2){
            background-color: pink;
            /* flex-grow: 2; */
        }
        li:nth-child(3){
            background-color: orange;
            /* flex-grow: 3; */
        }
        li:nth-child(4){
            background-color: yellow;
            /* flex-grow: 2; */
        }
        li:nth-child(5){
            background-color: yellowgreen;
            /* flex-grow: 3; */
        }
    </style>
</head>
<body>
     <ul>
         <li>1</li>
         <li>2
             <div>2</div>
         </li>
         <li>3
             <div>3</div>
             <div>3</div>
         </li>
         <li>1</li>
         <li>2
             <div>2</div>
         </li>
     </ul>
</body>
</html>